
L.Question = L.Element.extend({

  initialize: function (attrs, options) {
    L.Element.prototype.initialize.call(this, attrs, options);
  },


  serialize: function() {
    /*
    {
      type: "question",
      desc: "asdf",
      alternatives:{
        "A":"foo",
        "B":"bar",
        "C":"buz"
      }
    }


    */

    var attrs = {
      type:'question'
    };
    /*
    L.Util.extend(attrs, this._attrs);
    if(attrs.path){
      attrs.path = this.svg_path_to_string(attrs.path);
    }
    */
    return attrs;
  },

  deserialize: function(attrs) {
    this._attrs = attrs;
    /*
    if(typeof attrs.path == 'string'){
      attrs.path = this.string_to_svg_path(attrs.path);
    }
    this._attrs = attrs;
    if(this._canvas){
      this.draw();
    }
    */
  },

  attr: function(){
    if(!this._element){
      var args = Array.prototype.slice.call(arguments);
      this.deserialize(args[0])
      console.log("[warning]attr() aun no esta implementada para ser llamada antes de ser agrega a un canvas, argumento fue deserializado")
      return;
    }
    var resp = this._element.attr.apply(this._element, arguments);
    var attrs = this._element.attr();
    attrs.type = this._attrs.type;
    attrs.id = this._attrs.id;
    attrs['stroke-width'] = this._attrs['stroke-width'];
    this._attrs = attrs;
    if(this._fireEvents){
      this.fire('change', this);
    }
    return resp != this._element? resp : this;
  },

  noEventsAttr: function(){
    this._fireEvents = false;
    var resp = this.attr.apply(this, arguments);
    this._fireEvents = true;
    return this;
  },

  draw: function() {

    var raphael = this._canvas.getRaphael();

    var elQuestion = this._elQuestion = raphael.text();
    elQuestion.attr({
      'font-size':24,
      'text-anchor': 'start',
      'fill': '#000000',
      'text': textFlow2('Esta es una pregunta', elQuestion.node, 800),
      'x':150,
      'y':50
    })


    var elAltA = this._elAltA = raphael.rect();
    elAltA.attr({
      x:150,
      y:500,
      width:100,
      height:50,
      fill:'#bbb'
    })

    var elAltB = this._elAltB = raphael.rect();
    elAltB.attr({
      x:300,
      y:500,
      width:100,
      height:50,
      fill:'#bbb'
    })

    var elAltC = this._elAltC = raphael.rect();
    elAltC.attr({
      x:450,
      y:500,
      width:100,
      height:50,
      fill:'#bbb'
    })

    var elAltD = this._elAltD = raphael.rect();
    elAltD.attr({
      x:600,
      y:500,
      width:100,
      height:50,
      fill:'#bbb'
    })

    elAltA.data('elementId', this._attrs.id);
    elAltB.data('elementId', this._attrs.id);
    elAltC.data('elementId', this._attrs.id);
    elAltD.data('elementId', this._attrs.id);

  },

  erase: function() {
    if(this._elQuestion) this._elQuestion.remove();
    if(this._elAltA) this._elAltA.remove();
    if(this._elAltB) this._elAltB.remove();
    if(this._elAltC) this._elAltC.remove();
    if(this._elAltD) this._elAltD.remove();

  },

  scale: function(scale) {
    return;
    //no se guarda la propiedad escalada
    var strokeWidth = this._attrs["stroke-width"]*scale;
    this._element.attr("stroke-width", strokeWidth);
  },

  getRaphaelElement: function() {
    throw new Erron('asdf');
    return this._element;
  },

  bindEvents: function() {

    function _onHoverIn(obj){
      return function(){
        obj.attr({
          fill:"#bbffbb"
        })
      }
    }

    function _onHoverOut(obj){
      return function(){
        obj.attr({
          fill:"#bbbbbb"
        })
      }
    }

    function _onClick(msg){
      return function(){
        alert(msg)
      }
    }

    this._onHoverInA = _onHoverIn(this._elAltA);
    this._onHoverInB = _onHoverIn(this._elAltB);
    this._onHoverInC = _onHoverIn(this._elAltC);
    this._onHoverInD = _onHoverIn(this._elAltD);

    this._onHoverOutA = _onHoverOut(this._elAltA);
    this._onHoverOutB = _onHoverOut(this._elAltB);
    this._onHoverOutC = _onHoverOut(this._elAltC);
    this._onHoverOutD = _onHoverOut(this._elAltD);

    this._onClickA = _onClick('A');
    this._onClickB = _onClick('B');
    this._onClickC = _onClick('C');
    this._onClickD = _onClick('D');

    this._elAltA.hover(this._onHoverInA, this._onHoverOutA);
    this._elAltB.hover(this._onHoverInB, this._onHoverOutB);
    this._elAltC.hover(this._onHoverInC, this._onHoverOutC);
    this._elAltD.hover(this._onHoverInD, this._onHoverOutD);

    this._elAltA.click(this._onClickA)
    this._elAltB.click(this._onClickB)
    this._elAltC.click(this._onClickC)
    this._elAltD.click(this._onClickD)


  },

  unbindEvents: function(){
    this._elAltA.unhover(this._onHoverInA, this._onHoverOutA);
    this._elAltB.unhover(this._onHoverInB, this._onHoverOutB);
    this._elAltC.unhover(this._onHoverInC, this._onHoverOutC);
    this._elAltD.unhover(this._onHoverInD, this._onHoverOutD);

    this._elAltA.unclick(this._onClickA)
    this._elAltB.unclick(this._onClickB)
    this._elAltC.unclick(this._onClickC)
    this._elAltD.unclick(this._onClickD)

  },

  intersectWithBox: function(box){
    return false;
  },

  svg_path_to_string: function (path) {
    var str = "";
    for (var i = 0, n = path.length; i < n; i++) {
      var point = path[i];
      str += point[0] + parseInt(point[1]) + "," + parseInt(point[2]);
    }
    return str;
  },

  // Convert a string into an SVG path. This reverses the above code.
  string_to_svg_path: function (str) {
    var path = [];
    var tokens = str.split("L");
    
    if (tokens.length > 0) {
      var token = tokens[0].replace("M", "");
      var points = token.split(",");
      path.push(["M", parseInt(points[0]), parseInt(points[1])]);
      
      for (var i = 1, n = tokens.length; i < n; i++) {
        token = tokens[i];
        points = token.split(",");
        path.push(["L", parseInt(points[0]), parseInt(points[1])]);
      }
    }
    
    return path;
  },

  _onHoverIn: function(obj){
    console.dir(arguments)
    obj.attr({
      fill:"#bbffbb"
    })
  },

  _onHoverOut: function(obj){
    obj.attr({
      fill:"#bbbbbb"
    })
  }


});

